{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h2>You've chosen <em>{{ choice }}</em>. Stay on 
                this page until all the votes are counted.</h2>
            <h1><span id="vote-counter"></span> votes for 
                {{ choice }}.</h1>
    </div>
</div>
{% endblock %}


{% block js_body %}
<script type="text/javascript" 
    src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        namespace = '/cyoa';
        var websocket = io.connect('http://' + document.domain + ':' 
                                + location.port + namespace);

        websocket.emit('join', {'vote': '{{ choice }}'});

        websocket.on('msg', function(msg) {
            var voteCounter = $('#vote-counter').html(msg.val);
        });
    });
</script>
{% endblock %}
